<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
#div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;

}

@keyframes example {
  0%   {
  width: 100px;
  height: 100px;
  background-color:red; left:0px; top:0px;}
  100%  {
  width: 200px;
  height: 100px;
  background-color:yellow; left:200px; top:0px;}

}
</style>
</head>
<body>

<h4>两个按钮都可以使用,但需要重新刷新.</h4>
<button onclick='go_anima()'>用button标签属性onclik绑定方法.</button><br><br><br>
<button id='btn1'>用id获取标签元素绑定后使用元素onclik方法  的方法</button><br><br>


<div id='div1'></div>

</body>


<footer>
<script>
  var div_id=document.getElementById("div1");
	
  function go_anima() {
	   div_id.style.animation="example 2s";
  }

  var btn = document.getElementById('btn1');
  btn.onclick= function () {
  div_id.style.animation="example 2s forwards";
  }
	
    
  	
</script>
</footer>
</html>

